import React from 'react'
import { nanoid } from 'nanoid'


import "./index.css"
export default function Header({ updateTodoList }) {

  //键盘确定添加数据
  const addListHandle = (e) => {
    
    if (e.keyCode !== 13) return

    //空值不处理
    const data = e.target.value.trim()
    if (!data) return alert("有事没事?")

    
    updateTodoList({ id: nanoid(), todo: data, check: false })

    //提交表单清空
    e.target.value = ""
  }


  return (
    <div className="todo-header">
      <input type="text" onKeyUp={addListHandle} placeholder="请输入你的任务名称，按回车键确认" />
    </div>
  )
}
